<template>
  <div class="templates bg-white">
    <div v-if="isShowType('list')">
      <div class="operation-container" v-show="canAdd">
        <el-button type="primary" size="small" @click="add()">{{$t('add')}}</el-button>
      </div>
      <div class="table-list">
        <el-table :data="tableData" border style="width: 100%" size="mini" row-key="SysUserId">
          <el-table-column label="账号" prop="AccountName">
          </el-table-column>
          <el-table-column prop="CallName" label="姓名"></el-table-column>
          <el-table-column prop="Email" label="邮箱"></el-table-column>
          <el-table-column prop="Telephone" label="电话"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <div
                style="font-size:18px;"
                v-bind:class="[scope.row.Status == 1 ? 'el-icon-circle-check text-primary' : 'el-icon-circle-close text-danger']"
              ></div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('operation')" width="180">
            <template slot-scope="scope">
              <el-tooltip :content="$t('view')" placement="top" :open-delay="1000" v-if="viewDetail">
                <i class="el-icon-view text-warning operation-icon" @click="detail(scope.row)"></i>
              </el-tooltip>
              <el-tooltip  :content="$t('modify')" placement="top" :open-delay="1000" v-if="canEdit">
               <i class="el-icon-edit text-primary operation-icon" @click="add(scope.row)"></i>
              </el-tooltip>
              <el-tooltip :content="scope.row.Status ? $t('disable') : $t('enable')" placement="top" :open-delay="1000" v-if="canUpdateStatus">
                <i class="operation-icon" :class="[scope.row.Status == 1 ? 'text-danger el-icon-video-pause' : 'text-primary el-icon-video-play']" 
                @click="updateStatus($event, scope.row)"></i> 
              </el-tooltip>
              <el-tooltip :content="$t('delete')" placement="top" :open-delay="1000" v-if="canDelete && !scope.row.IsSys">
               <i class="el-icon-delete text-danger operation-icon" @click="handleDelete($event, scope.row.SysUserId)"></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <Edit v-if="isShowType('add')" @cancel="cancelAdd" @sure="sureAdd" :data="editItem" />
    <Detail v-if="isShowType('detail')" @cancel="cancelAdd" :data="editItem" />
  </div>
</template>

<script>
import Edit from './Edit';
import Detail from './Detail';
import { sysUser } from '../../models/fake-data';

export default {
  name: 'templates',
  components: {
    Edit,
    Detail,
  },
  created() {

  },
  mounted() {
    this.query();
  },
  data() {
    return {
      canAdd: true,
      canEdit: true,
      canUpdateStatus: true,
      canDelete: true,
      viewDetail: true,
      tableData: [],
      showType: "list",
    };
  },

  methods: {
    add: function (item) {
      this.showType = 'add';
      this.editItem = item;
    },
    isShowType: function (type) {
      return this.showType === type
    },
    async updateStatus($event, item) {
      let { SysUserId, Status } = item;
      $event && $event.target.blur();
      this.$confirm(`确认要${Status ? '停用' : '启用'}吗?`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          let req = {
            SysUserId: SysUserId,
            Status: Status ? 0 : 1,
          }
          item.Status = req.Status;
        } catch (e) {
          this.$message.warning(e && e.message || '更新管理员状态失败');
        }
      }).catch(() => {

      });
    },
    async search() {
      this.query();
    },
    async handleDelete($event, SysUserId) {
      $event && $event.target.blur();
      this.$confirm(`确认要删除吗?`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          let tableData = this.tableData && this.tableData.filter((item) => item.SysUserId !== SysUserId);
          this.tableData = tableData;
        } catch (e) {
          this.$message.warning(e && e.message || '删除管理员失败');
        }
      }).catch(() => {

      });
    },
    async query() {
      this.tableData = sysUser || [];
    },
    cancelAdd() {
      this.showType = 'list'
    },
    handleEdit(item) {
      this.editItem = item
      this.showType = 'add'
    },
    sureAdd() {
      this.showType = 'list'
      this.query();
    },
    detail(item) {
      this.showType = 'detail';
      this.editItem = item;
    }
  }
}
</script>
